/*
 注意在 真正的项目中 不建议这样做 一般是引入一个reset.css文件这个文件一般是 团队有 没有自己去网上扒一个
 官方网站：https://meyerweb.com/eric/tools/css/reset/
*/
/* *{
    margin: 0;
    padding: 0;
} */
#game-background{
	position: relative;
	width: 100%;
	height: 600px;
	background-image: url('../images/sky.png');
}
/* 因为这个小鸟需要在中间去 所以需要移动位置 用到了定位 口诀：父相子绝 */
.bird{
	position: absolute;
	top: 232px;
	left: 50%;
	/* 移回去宽度的一半 */
	margin-left: -15px;
	width: 30px;
	height: 30px;
	/* 因为这个小鸟是动的 有三个状态  */
	background-image: url('../images/birds.png');
}
.start{
	position: absolute;	
	left: 50%;
	margin-left: -100px;
	width: 200px;
	height: 60px;
	top: 295px;
	line-height: 60px;
	font-weight: bolder;
	text-align: center;
}
.start.start-white{
	color: white;
	font-size: 24px;
}
.start.start-blue{
	color: blue;
	font-size: 36px;
}
/* 分数 */
.score{
	position: absolute;
	left: 50%;
	/*因为没有宽度的关系 这里移动中间去 用到css3属性 */
	transform: translateX(-50%);
	font-size: 24px;
	color: blue;
	font-weight: bolder;
}
/* 蒙层 由于mask没有自己的宽度 都没像素就会自动称大*/
.mask{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: #000;
	opacity: .7;
}
.end{
	position: absolute;
	top: 70px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	color: red;
	text-align: center;
}
.end .over{
	font-size: 35px;
	font-weight: bolder;
	color: red;
}
.end .result,.end .fina-scroe{
	margin-top: 20px;
	color: #ff0;
	font-size: 20px;
	font-weight: bold;
}
.end .rank-list{
	margin-top: 20px;
	color: #09f;
}
.end .rank-item{
	height: 30px;
	padding: 0 10px;
	line-height: 30px;
}
.end .rank-degree{
	/* 行级块元素 */
	display: inline-block;
	margin-right: 15px;
	width: 14px;
	height: 14px;
	line-height: 14px;
	color: #fff;
	background-color: #8eb9f5;
	font-size: 12px;
	margin-right: ;
}
.end .rank-degree.first{
	background-color: #f54545;
}
.end .rank-degree.second{
	background-color: #ff8547;
}
.end .rank-degree.third{
	background-color: #ffac38;
}
.end .rank-scroe{
	display: inline-block;
	width: 30px;
}
.end .restart{
	color: #09f;
	font-size: 18px;
	font-weight: bolder;
	cursor: pointer;
}